<script setup lang="ts">
import ConfigForm from './ConfigForm.vue'
import { checkRole } from '@/utils/permission'
import * as DineConfigApi from '@/api/dine/config/ConfigApi'
import { priceModeMap, deliveryTypeMap, deliveryScopeMap } from './enums'
import { fenToYuan } from '@/utils'

defineComponent({
  name: 'DineConfig'
})

const tableData = reactive({
  total: 0,
  loading: true,
  list: [],
  searchParam: {
    pageNo: 1,
    pageSize: 10,
    createTime: []
  }
})

const loadConfigData = async () => {
  tableData.loading = true
  try {
    const res = await DineConfigApi.getPage({
      ...tableData.searchParam
    })
    tableData.list = res.list
    tableData.total = res.total
  } finally {
    tableData.loading = false
  }
}

const formatDeliveryTypes = (types: []) => {
  if (!types || !types.length) return ''
  return types.map((type) => deliveryTypeMap[type] || type).join('、')
}

onMounted(async () => {
  if (checkRole(['shop_admin'])) {
    return
  }
  tableData.searchParam.pageNo = 1
  await loadConfigData()
})
</script>

<template>
  <ContentWrap>
    <ConfigForm v-hasRole="['shop_admin']" />
    <el-table
      v-hasRole="['super_admin', 'platform_admin', 'tenant_admin']"
      :data="tableData.list"
      size="large"
      v-loading="tableData.loading"
    >
      <template #empty>
        <span>{{ !tableData.loading ? '没有相关数据' : '' }}</span>
      </template>
      <el-table-column
        v-hasRole="['super_admin', 'platform_admin', 'tenant_admin']"
        label="所属店铺"
        min-width="150"
      >
        <template #default="{ row }">
          <div>{{ row.shop?.name || row.shopId }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="priceMode" label="计价模式" width="120">
        <template #default="{ row }">
          <el-tag :type="row.priceMode === 1 ? 'primary' : 'success'">
            {{ priceModeMap[row.priceMode] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="consumeThresholdPrice" label="最低消费" width="100">
        <template #default="{ row }"> ¥{{ fenToYuan(row.consumeThresholdPrice) }} </template>
      </el-table-column>
      <el-table-column prop="deliveryTypes" label="配送方式" min-width="150">
        <template #default="{ row }">
          {{ formatDeliveryTypes(row.deliveryTypes) }}
        </template>
      </el-table-column>
      <el-table-column prop="deliveryScope" label="配送范围" width="100">
        <template #default="{ row }">
          {{ deliveryScopeMap[row.deliveryScope] }}
        </template>
      </el-table-column>
      <el-table-column prop="deliveryPrice" label="配送费" width="100">
        <template #default="{ row }"> ¥{{ fenToYuan(row.deliveryPrice) }} </template>
      </el-table-column>
      <el-table-column prop="deliveryFreeThresholdPrice" label="免配送费门槛" width="120">
        <template #default="{ row }"> ¥{{ fenToYuan(row.deliveryFreeThresholdPrice) }} </template>
      </el-table-column>
      <el-table-column prop="maxDailyOrders" label="日接单量" width="120">
        <template #default="{ row }">
          {{ row.maxDailyOrders === -1 ? '不限' : row.maxDailyOrders + '笔' }}
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-model:limit="tableData.searchParam.pageSize"
      v-model:page="tableData.searchParam.pageNo"
      :total="tableData.total"
      @pagination="loadConfigData"
    />
  </ContentWrap>
</template>
